<template>
  <div class="dataset-container">
    <!-- 顶部操作栏 -->
    <div class="operation-bar">
      <div class="left">
        <el-radio-group v-model="viewType" size="small">
          <el-radio-button label="数据集市"></el-radio-button>
          <el-radio-button label="业务指标"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="right">
        <el-input
          v-model="searchKey"
          placeholder="搜索"
          prefix-icon="Search"
          clearable
          class="search-input"
        />
        <el-button-group class="view-mode">
          <el-button :type="viewMode === 'grid' ? 'primary' : ''" @click="viewMode = 'grid'">
            <el-icon><Grid /></el-icon>
          </el-button>
          <el-button :type="viewMode === 'list' ? 'primary' : ''" @click="viewMode = 'list'">
            <el-icon><List /></el-icon>
          </el-button>
        </el-button-group>
        <el-button type="primary" @click="handleCreate">
          <el-icon><Plus /></el-icon>新建文件夹
        </el-button>
        <el-button type="primary" @click="handleCreateDataset">
          <el-icon><Plus /></el-icon>新建数据集
        </el-button>
      </div>
    </div>

    <!-- 数据集列表 -->
    <div class="dataset-list" :class="viewMode">
      <template v-if="viewMode === 'grid'">
        <el-card 
          v-for="item in datasetList" 
          :key="item.id" 
          class="dataset-card"
          shadow="hover"
        >
          <div class="card-content">
            <!-- 数据集图标 -->
            <div class="icon-wrapper">
              <img 
                :src="getDatasetIcon(item.type)" 
                :alt="item.title"
                class="dataset-icon"
              />
            </div>
            
            <!-- 数据集信息 -->
            <div class="info">
              <h3 class="title">{{ item.title }}</h3>
              <div class="meta">
                <span class="creator">{{ item.creator }}</span>
                <el-tag size="small" :type="item.type">{{ item.type }}</el-tag>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="actions">
              <el-dropdown trigger="click">
                <el-button type="text">
                  <el-icon><More /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleEdit(item)">编辑</el-dropdown-item>
                    <el-dropdown-item @click="handleDelete(item)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-card>
      </template>

      <template v-else>
        <el-table 
          :data="datasetList"
          style="width: 100%"
        >
          <el-table-column label="名称" min-width="200">
            <template #default="{ row }">
              <div class="name-cell">
                <img 
                  :src="getDatasetIcon(row.type)" 
                  :alt="row.title"
                  class="dataset-icon"
                />
                <span>{{ row.title }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="创建时间" min-width="180">
            <template #default="{ row }">
              <div class="time-cell">
                <div>{{ row.creator }}</div>
                <div class="time">{{ row.createdAt }}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="最近编辑" min-width="180">
            <template #default="{ row }">
              <div class="time-cell">
                <div>{{ row.lastEditor }}</div>
                <div class="time">{{ row.lastEditTime }}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="最近访问" min-width="180">
            <template #default="{ row }">
              <div class="time-cell">
                <div>{{ row.lastVisitor }}</div>
                <div class="time">{{ row.lastVisitTime }}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="访问热度" min-width="100">
            <template #default="{ row }">
              <span>{{ row.visitCount || '-' }}</span>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="80">
            <template #default="{ row }">
              <el-dropdown trigger="click">
                <el-button type="text">
                  <el-icon><More /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleEdit(row)">编辑</el-dropdown-item>
                    <el-dropdown-item @click="handleDelete(row)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Grid, List, Search, Plus, More } from '@element-plus/icons-vue'
import barCover from '@/assets/images/dataset/bar-cover-placeholder.svg'
import lineCover from '@/assets/images/dataset/line-cover-placeholder.svg'
import areaCover from '@/assets/images/dataset/area-cover-placeholder.svg'
import folderIcon from '@/assets/images/dataset/data_mart_area_folder.svg'

// 视图类型
const viewType = ref('数据集市')
const viewMode = ref('grid')
const searchKey = ref('')

// 数据集列表
const datasetList = ref([
  {
    id: 1,
    title: '新建文件夹-20241303',
    creator: '管理员(admin)',
    createdAt: '2024-12-03 13:34:53',
    lastEditor: '管理员(admin)',
    lastEditTime: '2024-12-03 13:34:53',
    lastVisitor: '管理员(admin)',
    lastVisitTime: '2024-12-03 13:34:53',
    visitCount: 0,
    type: 'folder',
  },
  {
    id: 2,
    title: 'HSB-POC',
    creator: '管理员',
    type: 'folder',
  },
  {
    id: 3,
    title: 'API数据集',
    creator: '管理员',
    type: 'dataset',
  },
  // ... 更多数据
])

// 获取数据集图标
const getDatasetIcon = (type: string) => {
  switch (type) {
    case 'folder':
      return folderIcon
    case 'bar':
      return barCover
    case 'line':
      return lineCover
    case 'area':
      return areaCover
    default:
      return folderIcon
  }
}

// 处理创建文件夹
const handleCreate = () => {
  // TODO: 实现创建文件夹逻辑
}

// 处理创建数据集
const handleCreateDataset = () => {
  // TODO: 实现创建数据集逻辑
}

// 处理编辑
const handleEdit = (item: any) => {
  // TODO: 实现编辑逻辑
}

// 处理删除
const handleDelete = (item: any) => {
  // TODO: 实现删除逻辑
}

onMounted(() => {
  // TODO: 获取数据集列表
})
</script>

<style lang="scss" scoped>
.dataset-container {
  padding: 20px;
  
  .operation-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .right {
      display: flex;
      gap: 12px;
      align-items: center;

      .search-input {
        width: 200px;
      }
    }
  }

  .dataset-list {
    display: grid;
    gap: 20px;
    
    &.grid {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    &.list {
      grid-template-columns: 1fr;
      
      // 表格样式覆盖
      :deep(.el-table) {
        --el-table-border-color: #ebeef5;
        --el-table-header-bg-color: #f5f7fa;
        
        .el-table__header-wrapper {
          th {
            background-color: var(--el-table-header-bg-color);
            color: var(--el-text-color-regular);
            font-weight: 500;
          }
        }
      }

      .name-cell {
        display: flex;
        align-items: center;
        gap: 8px;

        .dataset-icon {
          width: 24px;
          height: 24px;
          object-fit: contain;
        }
      }

      .time-cell {
        .time {
          color: #999;
          font-size: 12px;
          margin-top: 4px;
        }
      }
    }
  }

  .dataset-card {
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
    }

    .card-content {
      display: flex;
      align-items: center;
      gap: 16px;

      .icon-wrapper {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;

        .dataset-icon {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .info {
        flex: 1;

        .title {
          margin: 0 0 8px;
          font-size: 16px;
          font-weight: 500;
        }

        .meta {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #666;
          font-size: 13px;

          .creator {
            color: #999;
          }
        }
      }

      .actions {
        opacity: 0;
        transition: opacity 0.3s;
      }
    }

    &:hover .actions {
      opacity: 1;
    }
  }
}

// 添加表格hover效果
:deep(.el-table__row) {
  &:hover {
    .el-dropdown {
      opacity: 1;
    }
  }

  .el-dropdown {
    opacity: 0;
    transition: opacity 0.3s;
  }
}
</style>